<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    body,
    ul {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .tab-box {
      width: 383px;
      margin: 10px;
      border: 1px solid #ccc;
      border-top: 2px solid #206F96;
    }

    .tab-head {
      height: 31px;
    }

    .tab-head-div {
      width: 95px;
      height: 30px;
      float: left;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      background: #206F96;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      color: #fff;
    }

    .tab-head .current {
      background: #fff;
      border-bottom: 1px solid #fff;
      color: #000;
    }

    .tab-head-r {
      border-right: 0;
    }

    .tab-body-div {
      display: none;
      margin: 20px 10px;
    }

    .tab-body .current {
      display: block;
    }
  </style>
</head>

<body>
  <div class="tab-box">
    <div class="tab-head">
      <div class="tab-head-div ">标签一</div>
      <div class="tab-head-div ">标签二</div>
      <div class="tab-head-div current">标签三</div>
      <div class="tab-head-div tab-head-r">标签四</div>
    </div>
    <!--jkdjfk?-->
    <div class="tab-body">
      <div class="tab-body-div "> 内容1
        <p>一号</p>
      </div>
      <div class="tab-body-div ">内容 2
        <p>二号</p>
      </div>
      <div class="tab-body-div">内容 3
        <p>三号</p>
      </div>
      <div class="tab-body-div current"> 内容4
        <p>四号</p>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var arr = document.getElementsByClassName('tab-head-div')
    var num = document.getElementsByClassName('tab-body-div')
    for (var i = 0; i < arr.length; ++i) {
      arr[i].onclick = function () {
        for (var i = 0; i < num.length; ++i) {
          if (arr[i] == this) {
            arr[i].classList.add('current');
            num[i].classList.add('current');

          }

          else {
            arr[i].classList.remove('current');
            num[i].classList.remove('current');
          }
        }
      }
    }
  </script>
</body>

</html>